<template>
    <div>
        <table style="width: 100%;" class="m_table">
            <tbody>
                <tr>
                    <td style="width: 100px;">
                        <div class="music_box">
                            <img src="/assets/ico/music/music_head.png" class="music_top_img"/>
                            <img src="/assets/ico/music/music_bgc.png" class="music_bgc_img"/>
                        </div>
                    </td>
                    <td style="width: 250px;">
                        <div style="margin-right: 30px;">
                            <span>ACiD (Manley-Mash-UP)</span><br/>
                            <span style="color: gray; font-size: 14px;">Manley | BPM:126 | KEY:9A</span>
                        </div>
                    </td>
                    <td style="width: 60px;">
                        <div class="center">
                            <img :src="img.play_left.ico" style="cursor: pointer" @mousedown="img.play_left.ico = img.play_left.down" @mouseup="img.play_left.ico = img.play_left.up"/>
                        </div>
                    </td>
                    <td style="width: 60px;">
                        <div class="center">
                            <img :src="img.play.ico" @click="fnPlay" style="cursor: pointer;"/>
                        </div>
                    </td>
                    <td style="width: 60px;">
                        <div class="center">
                            <img :src="img.play_right.ico"  style="cursor: pointer" @mousedown="img.play_right.ico = img.play_right.down" @mouseup="img.play_right.ico = img.play_right.up"/>
                        </div>
                    </td>
                    <td style="width: 36px;"></td>
                    <td>
                        <div class="change_source" v-if="status.versionSelect">
                            <div style="margin-bottom: 15px; margin-left: 10px;">切換音源</div>
                            <div class="c_source">
                                <div v-for="(sourceItem, sourceIdx) in sourceList" class="c_source_item">
                                    {{sourceItem.name}}
                                </div>
                            </div>
                        </div>
                        <div style="max-width: 90px; height: 38px; background-color: rgb(39, 32, 1); border: 1px solid rgb(30, 30, 30); border-radius: 7px; cursor: pointer;" class="center" @click="checkVersion" @mouseover="status.versionHover = true" @mouseout="status.versionHover = false">
                            <span :style="(status.versionHover || status.versionSelect ? 'color: rgb(255, 210, 16)' : '')">Ver 6</span>
                            <!-- 默认 -->
                            <svg v-if="!status.versionHover && !status.versionSelect" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="30" height="30" viewBox="0 0 30 30"><g transform="matrix(1,5.2146120310681e-8,-5.2146120310681e-8,1,0,0)"><g><g><g transform="matrix(-1,0,0,-1,60,60)"></g><g><g><path d="M8 10.5C8 10.5 8 10.5 8 10.5L11 10.5C11 10.5 11 10.5 11 10.5L11 13.5C11 13.5 11 13.5 11 13.5L8 13.5C8 13.5 8 13.5 8 13.5Z" fill="#FFFFFF" fill-opacity="1"/></g><g><path d="M11 13.5C11 13.5 11 13.5 11 13.5L14 13.5C14 13.5 14 13.5 14 13.5L14 16.5C14 16.5 14 16.5 14 16.5L11 16.5C11 16.5 11 16.5 11 16.5Z" fill="#FFFFFF" fill-opacity="1"/></g><g><path d="M14 16.5C14 16.5 14 16.5 14 16.5L17 16.5C17 16.5 17 16.5 17 16.5L17 19.5C17 19.5 17 19.5 17 19.5L14 19.5C14 19.5 14 19.5 14 19.5Z" fill="#FFFFFF" fill-opacity="1"/></g><g><path d="M17 13.5C17 13.5 17 13.5 17 13.5L20 13.5C20 13.5 20 13.5 20 13.5L20 16.5C20 16.5 20 16.5 20 16.5L17 16.5C17 16.5 17 16.5 17 16.5Z" fill="#FFFFFF" fill-opacity="1"/></g><g><path d="M20 10.5C20 10.5 20 10.5 20 10.5L23 10.5C23 10.5 23 10.5 23 10.5L23 13.5C23 13.5 23 13.5 23 13.5L20 13.5C20 13.5 20 13.5 20 13.5Z" fill="#FFFFFF" fill-opacity="1"/></g></g></g></g></g></svg>
                            <!-- 悬浮 -->
                            <svg v-if="status.versionHover && !status.versionSelect" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="30" height="30" viewBox="0 0 30 30"><g><g><g><g transform="matrix(-1,0,0,-1,60,60)"></g><g><g><path d="M8 10.5C8 10.5 8 10.5 8 10.5L11 10.5C11 10.5 11 10.5 11 10.5L11 13.5C11 13.5 11 13.5 11 13.5L8 13.5C8 13.5 8 13.5 8 13.5Z" fill="#FFD210" fill-opacity="1"/></g><g><path d="M11 13.5C11 13.5 11 13.5 11 13.5L14 13.5C14 13.5 14 13.5 14 13.5L14 16.5C14 16.5 14 16.5 14 16.5L11 16.5C11 16.5 11 16.5 11 16.5Z" fill="#FFD210" fill-opacity="1"/></g><g><path d="M14 16.5C14 16.5 14 16.5 14 16.5L17 16.5C17 16.5 17 16.5 17 16.5L17 19.5C17 19.5 17 19.5 17 19.5L14 19.5C14 19.5 14 19.5 14 19.5Z" fill="#FFD210" fill-opacity="1"/></g><g><path d="M17 13.5C17 13.5 17 13.5 17 13.5L20 13.5C20 13.5 20 13.5 20 13.5L20 16.5C20 16.5 20 16.5 20 16.5L17 16.5C17 16.5 17 16.5 17 16.5Z" fill="#FFD210" fill-opacity="1"/></g><g><path d="M20 10.5C20 10.5 20 10.5 20 10.5L23 10.5C23 10.5 23 10.5 23 10.5L23 13.5C23 13.5 23 13.5 23 13.5L20 13.5C20 13.5 20 13.5 20 13.5Z" fill="#FFD210" fill-opacity="1"/></g></g></g></g></g></svg>
                            <!-- 点击 -->
                            <svg v-if="status.versionSelect" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="30" height="30" viewBox="0 0 30 30"><g transform="matrix(-1,0,0,-1,60,60)"><g><g><g transform="matrix(-1,0,0,-1,120,120)"></g><g><g><path d="M38 40.5C38 40.5 38 40.5 38 40.5L41 40.5C41 40.5 41 40.5 41 40.5L41 43.5C41 43.5 41 43.5 41 43.5L38 43.5C38 43.5 38 43.5 38 43.5Z" fill="#FFD210" fill-opacity="1"/></g><g><path d="M41 43.5C41 43.5 41 43.5 41 43.5L44 43.5C44 43.5 44 43.5 44 43.5L44 46.5C44 46.5 44 46.5 44 46.5L41 46.5C41 46.5 41 46.5 41 46.5Z" fill="#FFD210" fill-opacity="1"/></g><g><path d="M44 46.5C44 46.5 44 46.5 44 46.5L47 46.5C47 46.5 47 46.5 47 46.5L47 49.5C47 49.5 47 49.5 47 49.5L44 49.5C44 49.5 44 49.5 44 49.5Z" fill="#FFD210" fill-opacity="1"/></g><g><path d="M47 43.5C47 43.5 47 43.5 47 43.5L50 43.5C50 43.5 50 43.5 50 43.5L50 46.5C50 46.5 50 46.5 50 46.5L47 46.5C47 46.5 47 46.5 47 46.5Z" fill="#FFD210" fill-opacity="1"/></g><g><path d="M50 40.5C50 40.5 50 40.5 50 40.5L53 40.5C53 40.5 53 40.5 53 40.5L53 43.5C53 43.5 53 43.5 53 43.5L50 43.5C50 43.5 50 43.5 50 43.5Z" fill="#FFD210" fill-opacity="1"/></g></g></g></g></g></svg>
                        </div>
                    </td>
                    <td></td>
                    <td style="width: 60px">
                        <div class="center">
                            <img src="/assets/ico/music/like.png"  style="cursor: pointer"/>
                        </div>
                    </td>
                    <td style="width: 60px">
                        <div class="center">
                            <img src="/assets/ico/music/play_list.png"  style="cursor: pointer"/>
                        </div>
                    </td>
                    <td style="width: 60px">
                        <div class="center">
                            <img src="/assets/ico/music/audio.png"  style="cursor: pointer"/>
                        </div>
                    </td>
                    <td style="width: 60px">
                        <div class="center">
                            <input type="range" min="0" max="100" value="80"/>
                        </div>
                    </td>
                    <td style="width: 60px"></td>
                    <td style="width: 60px;">
                        <div class="center">
                            <img src="/assets/ico/music/download.png"  style="cursor: pointer"/>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    export default {
        name: "Music",
        data(){
            return {
                status: {
                    // 版本点击
                    versionSelect: false,
                    // 版本悬浮
                    versionHover: false,
                },
                img: {
                    play: {
                        ico: 'http://localhost:8099/assets/ico/music/play.png',
                        playStatus: false,
                        play: 'http://localhost:8099/assets/ico/music/play.png', pause: 'http://localhost:8099/assets/ico/music/play_pause.png'
                    },
                    play_left: {
                        ico: 'http://localhost:8099/assets/ico/music/play_left.png',
                        up: 'http://localhost:8099/assets/ico/music/play_left.png', down: 'http://localhost:8099/assets/ico/music/play_left_down.png'
                    },
                    play_right: {
                        ico: 'http://localhost:8099/assets/ico/music/play_right.png',
                        up: 'http://localhost:8099/assets/ico/music/play_right.png', down: 'http://localhost:8099/assets/ico/music/play_right_down.png'
                    },
                },
                sourceList: [{
                    vip: false, name: 'Clean', size: '32.22M', now: true
                },{
                    vip: false, name: 'Dirty', size: '32.21M', now: false
                },{
                    vip: false, name: 'Instrumental', size: '32.22M', now: false
                },{
                    vip: false, name: 'Clean, Intro Edit', size: '32.22M', now: false
                },{
                    vip: true, name: 'Clean, QuickHitter', size: '32.22M', now: false
                },{
                    vip: true, name: 'Dirty, Intro Edit', size: '32.22M', now: false
                },{
                    vip: true, name: 'Dirty, QuickHitter', size: '32.22M', now: false
                }]
            }
        },
        methods: {
            // 选择版本
            checkVersion(){
                this.status.versionSelect = !this.status.versionSelect;
            },
            fnPlay(){
                this.img.play.ico = this.img.play.playStatus ? this.img.play.play : this.img.play.pause;
                this.img.play.playStatus = !this.img.play.playStatus;
            }
        }
    }
</script>

<style scoped>
    table{
        border-collapse: collapse;
    }
    .c_source{
        height: 336px;
        overflow: auto;
    }
    .c_source_item{
        border-radius: 10px;
        height: 45px;
        line-height: 45px;
        padding-left: 10px;
    }
    .c_source_item:hover{
        cursor: pointer;
        -webkit-appearance: none;
        background: rgba(33, 33, 33, 0.5); /* 设置背景颜色为白色，并带有一定的透明度 */
        backdrop-filter: blur(10px); /* 对背后的内容应用10像素的模糊效果 */
    }
    .change_source{
        position: absolute;
        margin-top: -430px;
        margin-left: -150px;
        z-index: 3;
        border-radius: 15px;
        padding: 20px;
        width: 350px;
        height: 378px;
        -webkit-appearance: none;
        border: solid 0.125em rgba(15, 15, 15, 0.4);
        /*设置边框*/
        box-shadow: 1px 1px 1px 1px black;
        /*添加底部阴影*/
        background: rgba(15, 16, 17, 0.9); /* 设置背景颜色为白色，并带有一定的透明度 */
        backdrop-filter: blur(10px); /* 对背后的内容应用10像素的模糊效果 */
    }
    .music_box{
        display: inline-flex;
        margin-left: 30px;
        line-height: 60px;
        align-items: center;
        align-content: center;
        height: 60px;
        margin-right: 20px;
    }
    .music_top_img{
        display: flex;
        z-index: 2;
    }
    .music_bgc_img{
        display: flex;
        z-index: 1;
        margin-left: -25px;
    }

    input[type='range'] {
        -webkit-appearance: none;
        width: 120px;
        /*background: -webkit-linear-gradient(white, blue) no-repeat, #ddd;*/
        background: linear-gradient(to right, rgb(33, 33, 33), white);
        /*background-color: rgb(33, 33, 33);*/
        /*border-radius: 2px;*/
        /*这个属性设置使填充进度条时的图形为圆角*/
    }

    /* chrome */
    input[type='range']::-webkit-slider-thumb {
        -webkit-appearance: none;
    }

    input[type='range']::-webkit-slider-runnable-track {
        height: 13px;
        border-radius: 2px;
        /*将轨道设为圆角的*/
        box-shadow: 0 1px 1px rgb(33, 33, 33), inset 0 0.125em 0.125em #0d1112;
        /*轨道内置阴影效果*/
    }

    input[type='range']:focus {
        outline: none;
    }

    input[type='range']::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 18px;
        width: 5px;
        margin-top: -1px;
        /*使滑块超出轨道部分的偏移量相等*/
        background: #ffffff;
        /*border-radius: 50%;*/
        /*外观设置为圆形*/
        border: solid 0.125em rgba(205, 224, 230, 0.5);
        /*设置边框*/
        box-shadow: 0 0.125em 0.125em #3b4547;
        /*添加底部阴影*/
    }

    /* ----firefox---- */
    input[type='range']::-moz-range-track {
        height: 25px;
        border-radius: 10px;
        /*将轨道设为圆角的*/
        box-shadow: 0 1px 1px #def3f8, inset 0 0.125em 0.125em #0d1112;
        /*轨道内置阴影效果*/
    }

    input[type='range']::-moz-range-thumb {
        -webkit-appearance: none;
        height: 25px;
        width: 25px;
        margin-top: -5px;
        /*使滑块超出轨道部分的偏移量相等*/
        background: #ffffff;
        border-radius: 50%;
        /*外观设置为圆形*/
        border: solid 0.125em rgba(205, 224, 230, 0.5);
        /*设置边框*/
        box-shadow: 0 0.125em 0.125em #3b4547;
        /*添加底部阴影*/
    }
    input[type='range']::-ms-thumb {
        border: solid 0.125em rgba(205, 224, 230, 0.5);
        height: 25px;
        width: 25px;
        border-radius: 50%;
        background: #6fabff;
        margin-top: -5px;
        box-shadow: 0 0.125em 0.125em #3b4547;
    }

    input[type='range']::-ms-fill-lower {
        /*进度条已填充的部分*/
        height: 22px;
        border-radius: 10px;
        background: linear-gradient(to right, green, white 100%, white);
    }

    input[type='range']::-ms-fill-upper {
        /*进度条未填充的部分*/
        height: 22px;
        border-radius: 10px;
        background: #2f3fff;
    }

    input[type='range']:focus::-ms-fill-lower {
        background: linear-gradient(to right, green, white 100%, white);
    }

    input[type='range']:focus::-ms-fill-upper {
        background: #ffffff;
    }
    .m_table {
        background: rgba(15, 15, 15, 0.3); /* 设置背景颜色为白色，并带有一定的透明度 */
        backdrop-filter: blur(10px); /* 对背后的内容应用10像素的模糊效果 */
        /*border-radius: 10px; !* 添加圆角 *!*/
        /*padding: 20px;*/
        /*box-sizing: border-box;*/
        /*position: relative;*/
        /*overflow: hidden;*/
    }
</style>
